<template>
  <el-popover
    placement="top"
    width="275"
    v-model="visible"
  >
    <template #default>
      <el-form :model="innerData" ref="form" label-width="120px" size="mini">
        <!-- 修改日历库存 -->
        <el-form-item v-if="canShow.includes('stockNum')" label="日历库存" prop="stockRemain" verify>
          <SafeInputNumber v-model.number="innerData.stockRemain" :min="0" :max="10000000"
                    oninput="value=value.replace(/[^\d]/g,'')"/>
        </el-form-item>

        <!-- 修改日历库存余量 -->
        <el-form-item v-if="canShow.includes('stockRemain')" label="日历库存余量" prop="stockRemain" verify>
          <SafeInputNumber v-model="innerData.stockRemain" :min="0" :max="10000000"
                    oninput="value=value.replace(/[^\d]/g,'')"/>
        </el-form-item>
      </el-form>
      <div style="text-align: right; margin-top: 10px">
        <el-button type="primary" size="mini" @click="onOk" :loading="loading">{{ loading ? '更新中' : '确定' }}</el-button>
      </div>
    </template>
    <i
      slot="reference"
      class="el-icon-edit-outline"
      style="margin-left: 10px; font-size: 16px"
    ></i>
  </el-popover>
</template>

<script>
export default {
  props: {
    value: {
      type: Object,
      default: _ => {}
    },
    // 产品id
    productId: {
      type: String,
      default: undefined
    },
    // 需要显示的量
    canShow: {
      type: Array,
      default: () => ['stockNum', 'stockRemain']
    }
  },
  data () {
    return {
      loading: false,
      visible: false,
      innerData: {}
    }
  },
  watch: {
    // innerData值跟随value变化， 但是value值不是跟随innerData变化的（不能双向绑定）， 只有确定按钮发送请求返回更新结果成功后才触发更新value
    value: {
      handler (val) {
        this.innerData = val
      },
      immediate: true
    }
  },
  methods: {
    onOk () {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.loading = true
          this.$POST('/sot-admin-api/product/repertory/updateBatchCalendarStock', {
            productId: this.productId,
            items: [this.innerData]
          }).then(() => {
            this.$swal.success('更新库存成功')
            this.$bus.emit('ticket-stock-calendar:refresh')
            this.visible = false
          }).finally(_ => {
            setTimeout(_ => { this.loading = false }, 300)
          })
        }
      })


    },

    // 更新库存日历列表
    updateTicketStockCalendar (items) {
      return
    }
  }
}
</script>
